<script setup>
import { computed, toRefs } from 'vue'
import { useRoute } from 'vue-router'

defineOptions({ name: 'SystemBreadcrumb' })
const props = defineProps({
  separator: {
    type: String,
    default: '/',
  },
  /**
   * 面包屑数据
   */
  dataArr: {
    type: Array,
    default: () => [],
  },
  /**
   * 面包屑字段映射
   */
  fieldMapping: {
    type: Object,
    default: () => ({}),
  },
})
const { dataArr, fieldMapping } = toRefs(props)
const defaultFieldMapping = {
  index: 'index',
  name: 'name',
  icon: 'icon',
  routePath: 'routePath',
  children: 'children',
  customDataMap: 'customDataMap',
}
const breadcrumbItemFieldMappingComputed = computed(() => {
  let mapping = { ...defaultFieldMapping }
  if (fieldMapping?.value) {
    mapping = { ...defaultFieldMapping, ...fieldMapping?.value }
  }
  return mapping
})

const realBreadcrumbItemComputed = computed(() => {
  const breadcrumbItemIndexMap = new Map()
  const realBreadcrumbItemArr = arrDataConvert(
    breadcrumbItemIndexMap,
    null,
    dataArr.value
  )
  return { realBreadcrumbItemArr, breadcrumbItemIndexMap }
})
const $route = useRoute()
const showDataArr = computed(() => {
  const { name } = $route
  const { breadcrumbItemIndexMap } = realBreadcrumbItemComputed.value
  const cur = breadcrumbItemIndexMap.get(name)
  if (!name || !cur) return []
  const breadcrumbItem = breadcrumbItemIndexMap.get(name)
  if (!breadcrumbItem) return []
  const ret = breadcrumbItem.ancestorIndexArr
    ? breadcrumbItem.ancestorIndexArr.map(item =>
        breadcrumbItemIndexMap.get(item)
      )
    : []
  ret.push(cur)
  return ret
})

function arrDataConvert(menuIndexMap, parentMenuItem, arr) {
  if (!arr || arr.length === 0) {
    return []
  }

  return arr.reduce((prev, cur) => {
    const item = dataConvert(cur, parentMenuItem)
    menuIndexMap.set(item.index, item)
    prev.push(item)
    if (item.children) {
      item.children = arrDataConvert(menuIndexMap, item, item.children)
    }
    return prev
  }, [])
}

function dataConvert(cur, parentItem) {
  const breadcrumbItemFieldMapping = breadcrumbItemFieldMappingComputed.value
  const index = cur[breadcrumbItemFieldMapping.index]
    ? cur[breadcrumbItemFieldMapping.index]
    : undefined
  const name = cur[breadcrumbItemFieldMapping.name]
    ? cur[breadcrumbItemFieldMapping.name]
    : undefined
  const icon = cur[breadcrumbItemFieldMapping.icon]
    ? cur[breadcrumbItemFieldMapping.icon]
    : undefined
  const routePath = cur[breadcrumbItemFieldMapping.routePath]
    ? cur[breadcrumbItemFieldMapping.routePath]
    : undefined
  const children = cur[breadcrumbItemFieldMapping.children]
    ? cur[breadcrumbItemFieldMapping.children]
    : undefined
  const customDataMap = cur[breadcrumbItemFieldMapping.customDataMap]
    ? cur[breadcrumbItemFieldMapping.customDataMap]
    : undefined
  let parentIndex = undefined
  // 构建先辈节点index数组
  let ancestorIndexArr = []
  if (parentItem) {
    parentIndex = parentItem.index
    if (parentItem.ancestorIndexArr && parentItem.ancestorIndexArr.length > 0) {
      ancestorIndexArr = [...parentItem.ancestorIndexArr, parentItem.index]
    } else {
      ancestorIndexArr = [parentItem.index]
    }
  }
  return {
    parentIndex,
    index,
    name,
    icon,
    routePath,
    children,
    customDataMap,
    ancestorIndexArr,
  }
}
</script>

<template>
  <el-breadcrumb :separator="separator">
    <el-breadcrumb-item
      v-for="item in showDataArr"
      :key="item?.index"
      :to="item?.routePath"
    >
      {{ item?.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style lang="scss" scoped></style>
